<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Modal
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-segment piled @click="act">
        <!--<sui-dimmer :active="act1" inverted/>-->
        <sui-comment-group minimal threaded>
          <sui-comment>
            <sui-comment-avatar src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-comment-content>
              <a href="" is="sui-comment-author">Girl</a>
              <sui-comment-metadata>
                <div>一分钟之前</div>
              </sui-comment-metadata>
              <sui-comment-text>生命以负熵为食</sui-comment-text>
              <sui-comment-actions>
                <sui-comment-action>回复</sui-comment-action>
              </sui-comment-actions>
            </sui-comment-content>
            <sui-comment-group>
              <sui-comment>
                <sui-comment-avatar src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
                <sui-comment-content>
                  <a href="" is="sui-comment-author">Girl</a>
                  <sui-comment-metadata>
                    <div>一分钟之前</div>
                  </sui-comment-metadata>
                  <sui-comment-text>生命以负熵为食</sui-comment-text>
                  <sui-comment-actions>
                    <sui-comment-action>回复</sui-comment-action>
                  </sui-comment-actions>
                </sui-comment-content>
              </sui-comment>
            </sui-comment-group>
          </sui-comment>
          <sui-comment>
            <sui-comment-avatar src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-comment-content>
              <a href="" is="sui-comment-author">Girl</a>
              <sui-comment-metadata>
                <div>一分钟之前</div>
              </sui-comment-metadata>
              <sui-comment-text>生命以负熵为食</sui-comment-text>
              <sui-comment-actions>
                <sui-comment-action>回复</sui-comment-action>
              </sui-comment-actions>
            </sui-comment-content>
          </sui-comment>
          <sui-comment>
            <sui-comment-avatar src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-comment-content>
              <a href="" is="sui-comment-author">Girl</a>
              <sui-comment-metadata>
                <div>一分钟之前</div>
              </sui-comment-metadata>
              <sui-comment-text>生命以负熵为食</sui-comment-text>
              <sui-comment-actions>
                <sui-comment-action>回复</sui-comment-action>
              </sui-comment-actions>
            </sui-comment-content>
          </sui-comment>
          <sui-form>
            <textarea/>
            <sui-button
              content="回复"
              primary
              label-position="left"
              icon="edit"
            />
          </sui-form>
        </sui-comment-group>
      </sui-segment>
      <sui-divider/>
      <sui-button negative content="删除" @click="toggle"/>
    </sui-container>
    <sui-modal v-model="open" basic class="inverted">
      <sui-modal-header>删除文章</sui-modal-header>
      <sui-modal-content>
        <sui-modal-description>
          删除文章同时也会删除文章的所有的评论，确定要删除吗？
        </sui-modal-description>
      </sui-modal-content>
      <sui-modal-actions>
        <sui-button negative @click="toggle">否</sui-button>
        <sui-button positive @click="toggleYes">是</sui-button>
      </sui-modal-actions>
    </sui-modal>
    <sui-modal :open="on">
      <sui-modal-header>正在删除</sui-modal-header>
      <sui-modal-content>
        <sui-progress state="active"/>
      </sui-modal-content>
    </sui-modal>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  data () {
    return {
      open: false,
      on: false,
      act1: 1
    }
  },
  methods: {
    act () {
      if (this.act1 === 0) {
        this.act1 = 1
      } else {
        this.act1 = 0
      }
    },
    toggle () {
      this.open = !this.open
    },
    toggleYes () {
      this.open = !this.open
      this.on = true
    }
  }
}
</script>

<style scoped>

</style>
